<template>
	<div class="inner-wrap">
		<el-form
			ref="ruleFormDom"
			status-icon
			:model="ruleForm"
			:rules="rules"
			label-width="100px"
			class="demo-ruleForm"
		>
			<el-form-item label="密码" prop="password">
				<el-input
					v-model="ruleForm.password"
					type="password"
					autocomplete="off"
				></el-input>
			</el-form-item>
			<el-form-item label="确认密码" prop="newPassword">
				<el-input
					v-model="ruleForm.newPassword"
					type="password"
					autocomplete="off"
				></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')"
					>确认修改</el-button
				>
				<el-button @click="resetForm('ruleForm')">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { reactive, getCurrentInstance } from "vue";
import {postData} from "@/http/request";
import {ElMessage} from "element-plus";

export default {
	name: "Updatepassword",
	setup() {
		let { proxy } = getCurrentInstance();

		let ruleForm = reactive({
			password: "",
			newPassword: "",
		});

		let rules = reactive({
			password: [{ required: true, message: "请输入新密码", trigger: "blur" }],
			newPassword: [
				{
					trigger: "blur",
					validator: validatePass,
				},
			],
		});

		function validatePass(rule, value, callback) {
			if (value === "") {
				callback(new Error("请再次输入密码"));
			} else if (value !== ruleForm.password) {
				callback(new Error("两次输入密码不一致!"));
			} else {
				callback();
			}
		}

		let submitForm = () => {
			proxy.$refs["ruleFormDom"].validate((valid) => {
				if (valid) {
					alert("submit!");
				} else {
					console.log("error submit!!");
					return false;
				}
			});
		};

		let resetForm = () => {
			proxy.$refs["ruleFormDom"].resetFields();
		};

		return {
			ruleForm,
			rules,
			submitForm,
			resetForm,
		};
	},
};
</script>

<style scoped>
.inner-wrap {
	width: 40% !important;
	height: auto;
	overflow: hidden;
}
</style>
